<template>
    <div class="join_us_box outer_shadows">
        <p class="join_us_header" @click="joinUs(true)">点击加入我们</p>
        <div class="join_us_content">
            <p class="join_us_title">我们在寻找怀揣梦想的伙伴，一起做充满挑战的事情</p>
            <ul>
                <li v-for="(item,index) in posts" :key="index">
                    <p class="join_us_posts" @click="detail =  detail === index ? -1 : index">{{item.posts}}</p>
                    <p class="join_us_posts_detail" v-show="index === detail">{{item.detail}}</p>
                </li>
            </ul>
        </div>

        <InformationSubmission v-show="postsInfo" @join="joinUs"></InformationSubmission>
    </div>
</template>

<!--加入我们-->
<script setup>
import {ref} from "vue";
import InformationSubmission from "@/components/websiteHelp/InformationSubmission.vue";

//控制哪个内容打开
const detail = ref(-1);
//职位详情数据
const posts = ref([
    {posts:"前端工程师",detail:"负责前端页面上交互设计，确保页面能够正确访问保证页面流畅度"},
    {posts:"后端工程师",detail:"负责后端业务代码逻辑的编写，保证业务的顺利完成，能及时解决开发上的问题"},
    {posts:"UI设计师",detail:"负责页面上设计，确保页面的美观，根据用户的需求做出合理的设计"}
]);

//是否打开窗口职位信息
const postsInfo = ref(false);

//加入我们
const joinUs = (bool)=>{
    postsInfo.value = bool;
};


</script>

<style scoped>
.join_us_box {
    max-width: 800px;
    margin: auto;
    padding: 5px 10px;
}

.join_us_header {
    margin-bottom: 10px;
    padding: 10px;
    font-weight: bolder;
    transition: all .3s;
    cursor: pointer;
}

.join_us_header:hover {
    background: #6da6e1;
    color: white;
}

.join_us_content {
    padding: 10px;
}

ul {
    width: 100%;
    list-style: none;
}

li {
    min-height: 40px;
    line-height: 40px;
    cursor: pointer;
    color: #6da6e1;
}
.join_us_title{
    font-size: 14px;
    height: 30px;
    line-height: 30px;
}
.join_us_posts_detail {
    animation: posts_detail .1s ease-in 0s 1 forwards;
    color: #606162;
    line-height: 20px;
}

.join_us_posts:hover{
    text-decoration: underline;
}

@keyframes posts_detail {
    0% {
        transform: scaleY(0%);
    }
    100% {
        transform: scaleY(100%);
    }
}
</style>